<template lang="pug">
    view(class="cu-bar tabbar bg-white shadow foot")
        view(class="action" v-for="menu in menus" @click="navChange(menu)" :data-cur="menu.id" :key="menu.id")
            view(class="cuIcon-cu-image")
                image(v-if="menu.image" :src="menu.image")
                view(v-if="menu.icon" :class="textColor(menu) + ' cuIcon-' + menu.icon")
            view(:class="'' + textColor(menu)") {{menu.name}}      
</template>
<script>
export default {
  name: "bottom-navigation",

  data(){
    return {
      cur: null
    }
  },

  props: {
    menus: {type: Array, default: ()=> []}
  },

  methods: {
    navChange(menu) {
      if(menu.id === this.cur && menu.action === false) return;
      this.cur = menu.id
      this.$emit('nav-change', menu);
      if(menu.callback) menu.callback();
    },

    // 根据激活状态判断文本颜色
    textColor(menu){
      const color = menu.id === this.cur ? (menu.textActivedColir || 'green') : (menu.textColor||'grey');
      return 'text-'+color;
    }
  }
};
</script>
<style lang="scss" scoped>
view.cu-bar{
    // height: calc(100rpx + env(safe-area-inset-bottom) / 2)
    height: calc(100rpx + 30rpx)
}
view.cuIcon-cu-image,
view.cuIcon-cu-image view{
  line-height: 1.0;
}
</style>